<template>
    <el-card style="margin:20px;">
      <section class="changePwd">
      <el-form :model="form" :rules="rules" status-icon ref="form">
          <el-form-item label="当前密码" prop="pwd">
              <el-input class="input-type" v-model="form.pwd" type="password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPwd">
              <el-input class="input-type" v-model="form.newPwd" type="password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="再次输入新密码" prop="checkNewPwd">
              <el-input class="input-type" v-model="form.checkNewPwd" type="password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="submitForm('form')" style="background-color:rgb(118,149,255);border-color:rgb(118,149,255)">提交</el-button>
              <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
      </el-form>
      </section>
    </el-card>
</template>
<script>
import {changePassword} from "../../api/api";
export default {
  data(){
      //旧密码
      var checkPwd=(rule,value,callback) => {
          if(value==""){
              callback(new Error('请输入旧密码'));
          }else{
              callback();
          }
      }
      //新密码（第一次）
      var newPwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }
        else if(value.length>10 || value.length<6){
            callback(new Error('请输入长度为6-10位的新密码'))
        }else if(this.form.newPwd==this.form.pwd){
            callback(new Error('新密码不能与旧密码保持一致'))
        }else{
            if (this.form.checkNewPwd !== '') {
              this.$refs.form.validateField('checkNewPwd');
           }
           callback();
        }
      };
      //再次输入新密码验证
      var checkNewPwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        }else if(this.form.newPwd==this.form.pwd){
            callback(new Error('新密码不能与旧密码保持一致'))
        } else if (value !== this.form.newPwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return{
          form:{
              pwd:'',
              newPwd:'',
              checkNewPwd:''
          },
          ruleForm2:{
              pwd:'',
              newPwd:'',
              checkNewPwd:''
          },
          rules:{
              pwd:[
                  {validator: checkPwd, trigger:'blur'} 
              ],
              newPwd:[
                  {validator: newPwd, trigger: 'blur'}
              ],
              checkNewPwd:[
                  {validator: checkNewPwd, trigger: 'blur'}
              ]
          }
      }
  },
  methods:{
      resetForm(formName){
          this.$refs[formName].resetFields();
      },
      submitForm(formName){
          this.$refs[formName].validate(valid=> {
              if(valid){
              this.$confirm('是否确定修改账户密码?','提示',{

              }).then(()=>{
                  this.submitRequest();
              }).catch(()=>{
                  
              })
              } else {
                  return false;
              }
          });
      },
      submitRequest(){
           let user=JSON.parse(sessionStorage.getItem('user'));   
           let param={
               UserId:user.Id,
               OldPassword:this.form.pwd,
               NewPassword:this.form.newPwd,
           }
           changePassword(param).then(res=>{
               if(res.data.IsSuccess){
                   this.$message({
                       message:"密码修改成功",
                       type:"success"
                   });
                   sessionStorage.removeItem('user');
                   this.$router.push('/login');
               }else if(res.ErrorMessage="原始密码不正确，无法修改"){
                   this.$message({
                       message:"原密码输入错误，密码修改失败",
                       type:"warning"
                   })
                   return false;
               }
           });
      }
  }
}
</script>

<style>
     section.changePwd{
        width: 400px;
        margin: 0 auto
    } 
</style>
